import React, {Component} from 'react';
import {View, StyleSheet, Text, Image, ScrollView, Alert, FlatList, RefreshControl, ActivityIndicator, ImageBackground} from 'react-native';
import {Flex, WingBlank, List, Tabs, Modal, Toast} from '@ant-design/react-native';
import {
    getParkingOrderList,
    setParkingOrderState,
    setParkingOrderDepositState,
    setParkingOrderContractState,
    setParkingOrderIsFullPay,
    setParkingOrderIsComplete,
    setParkingOrderGiftState,
    setParkingOrderAgreementState,
    getParkingOrderListForOwnerOfMy,
} from '~/api/parking';
import {connect} from 'react-redux';
import store from '~/store';
const mapGetter = (state) => {
    return {
        userinfo: state.userinfo,
        system: state.system,
    };
};
let pagecount = 0;
let index = 1;
let size = 10;
const renderContent = (tab, index) => {
    const style = {
        paddingVertical: 40,
        justifyContent: 'center',
        alignItems: 'center',
        margin: 10,
        backgroundColor: '#ddd',
    };
};

class SaleOrder extends Component {
    static navigationOptions = ({navigation}) => {
        let title = '';
        if (navigation.state.params != null) {
            title = '销售量';
        } else {
            title = '销售订单';
        }
        return {
            title: title,
        };
    };

    constructor(props) {
        super(props);
        const getters = store.getState();
        this.state = {
            id: this.props.navigation.getParam('params'),
            index: this.props.navigation.getParam('params'),
            RegUserID: this.props.navigation.getParam('userid') || 0,
            companyBuildingID: this.props.navigation.getParam('companyBuildingID') || 0,
            list: [],
            tabinfo: [],
            tabs: [
                {title: '全部订单', value: 0},
                {title: '待支付', value: 1},
                {title: '待审核', value: 2},
                {title: '已认购', value: 3},
                {title: '已完成', value: 4},
            ],
            queryCondidate: {
                page_index: 1,
                page_size: 10,
                condidate: {
                    tabkey: 'all',
                    state: 0,
                },
            },
            itemimage: 'url图片地址',
            page_index: 1, //页
            page_size: 10, //每页条数
            isLoading: false, //加载
            refreshing: false,
            footer: 0, //上拉底部显示
        };
        this.TabClick = this.TabClick.bind(this);
        // this.GetList = this.GetList.bind(this);
    }

    TabClick(tab) {
        let temp = this.state.queryCondidate;
        temp.condidate.state = tab.value === 0 ? 0 : tab.value;
        temp.page_index = index;
        temp.page_size = size;
        temp.condidate.RegUserID = this.state.RegUserID;
        temp.condidate.CompanyBuildingID = this.state.companyBuildingID;
        this.setState(
            {
                queryCondidate: temp,
                tabinfo: tab,
                page_index: index, //页
                page_size: size, //每页条数
            },
            () => {
                this.GetList();
            },
        );
    }
    GetList() {
        getParkingOrderList(this.state.queryCondidate).then((r) => {
            if (r.code === 0) {
                this.setState({
                    list: r.data.list,
                    footer: 0,
                });
                if (this.state.page_index === 1) {
                    pagecount = r.data.total_page_count;
                    this.setState({
                        footer: r.data.total_item_count < 10 ? 2 : 0,
                    });
                }
            }
        });
    }
    AuditOrder(ParkingOrderID) {
        Modal.alert('提示', '确认审核订单？', [
            {
                text: '取消',
            },
            {
                text: '通过',
                onPress: () => {
                    setParkingOrderDepositState({
                        ParkingOrderID: ParkingOrderID,
                    }).then((r) => {
                        if (r.code === 0) {
                            this.GetList();
                        } else {
                            Toast.info(r.msg);
                        }
                    });
                },
            },
        ]);
    }
    ConfirmOrder(ParkingOrderID) {
        Modal.alert('提示', '确认签订认购协议？', [
            {
                text: '取消',
            },
            {
                text: '确认',
                onPress: () => {
                    setParkingOrderContractState({
                        ParkingOrderID: ParkingOrderID,
                        state: 1,
                    }).then((r) => {
                        if (r.code === 0) {
                            this.GetList();
                        } else {
                            Toast.info(r.msg);
                        }
                    });
                },
            },
        ]);
    }
    ConfirmAgreeOrder(ParkingOrderID) {
        Modal.alert('提示', '确认签订购车协议？', [
            {
                text: '取消',
            },
            {
                text: '确认',
                onPress: () => {
                    setParkingOrderAgreementState({
                        ParkingOrderID: ParkingOrderID,
                        state: 1,
                    }).then((r) => {
                        if (r.code === 0) {
                            this.GetList();
                        } else {
                            Toast.info(r.msg);
                        }
                    });
                },
            },
        ]);
    }
    ConfirmFull(ParkingOrderID) {
        Modal.alert('提示', '确认收到全款？', [
            {
                text: '取消',
            },
            {
                text: '确认',
                onPress: () => {
                    setParkingOrderIsFullPay({
                        ParkingOrderID: ParkingOrderID,
                    }).then((r) => {
                        if (r.code === 0) {
                            this.GetList();
                        } else {
                            Toast.info(r.msg);
                        }
                    });
                },
            },
        ]);
    }
    ConfirmLoan(ParkingOrderID) {
        Modal.alert('提示', '确认收到贷款？', [
            {
                text: '取消',
            },
            {
                text: '确认',
                onPress: () => {
                    setParkingOrderIsComplete({
                        ParkingOrderID: ParkingOrderID,
                    }).then((r) => {
                        if (r.code === 0) {
                            this.GetList();
                        } else {
                            Toast.info(r.msg);
                        }
                    });
                },
            },
        ]);
    }
    Comfirecoin(ParkingOrderID) {
        Modal.alert('提示', '确认发放现金券？', [
            {
                text: '取消',
            },
            {
                text: '确认',
                onPress: () => {
                    setParkingOrderGiftState({
                        ParkingOrderID: ParkingOrderID,
                    }).then((r) => {
                        console.log(r);
                        if (r.code === 0) {
                            this.GetList();
                        } else {
                            Toast.info(r.msg);
                        }
                    });
                },
            },
        ]);
    }
    _onRefresh() {
        let temp = this.state.queryCondidate;
        temp.condidate.state = this.state.tabinfo.value;
        temp.page_index = index;
        temp.page_size = size;
        this.setState({footer: 0, page_index: index, page_size: size, queryCondidate: temp}, () => {
            this.GetList();
        });
    }

    //上拉加载更多
    loadData = () => {
        this.setState({isLoading: false});
        let dataArray = [];
        if (pagecount - 1 > 0) {
            pagecount = pagecount - 1;
            this.setState(
                {
                    page_index: this.state.page_index + 1,
                    footer: 1,
                },
                () => {
                    let temp = this.state.queryCondidate;
                    temp.condidate.state = this.state.tabinfo.value;
                    temp.page_index = this.state.page_index;
                    temp.page_size = this.state.page_size;
                    temp.condidate.RegUserID = this.state.RegUserID;
                    temp.condidate.CompanyBuildingID = this.state.companyBuildingID;
                    this.setState(
                        {
                            queryCondidate: temp,
                        },
                        () => {
                            getParkingOrderList(this.state.queryCondidate).then((r) => {
                                if (r.code === 0) {
                                    dataArray = r.data.list;
                                    dataArray = this.state.list.concat(dataArray);
                                    this.setState({
                                        list: dataArray,
                                        isLoading: false,
                                    });
                                }
                            });
                        },
                    );
                },
            );
        } else {
            this.setState({
                footer: 2,
            });
        }
    };

    //上拉底部显示
    genIndicator() {
        if (this.state.footer === 1) {
            return (
                <View style={styles.indicatorContainer}>
                    <ActivityIndicator style={styles.indicator} size={'large'} animating={true} />
                    <Text style={{textAlign: 'center'}}>正在加载更多</Text>
                </View>
            );
        } else if (this.state.footer === 2) {
            return (
                <View
                    style={{
                        height: 30,
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                    }}>
                    <Text
                        style={{
                            color: '#999999',
                            fontSize: 14,
                            marginTop: 5,
                            marginBottom: 5,
                        }}>
                        没有更多数据了
                    </Text>
                </View>
            );
        } else if (this.state.footer === 0) {
            return (
                <View
                    style={{
                        height: 30,
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                    }}>
                    <Text
                        style={{
                            color: '#999999',
                            fontSize: 14,
                            marginTop: 5,
                            marginBottom: 5,
                        }}>
                        上拉加载更多
                    </Text>
                </View>
            );
        }
    }
    _renderItem(item) {
        return (
            <Flex
                onPress={() => {
                    this.props.navigation.push('MyOrderInfo', {
                        parkorderid: item.ParkingOrderID,
                    });
                }}
                direction={'column'}
                style={styles.itflex}>
                <Flex justify={'between'} style={styles.flex}>
                    <Text style={styles.texttop}>
                        时间：
                        {item.RegDateTime}
                    </Text>
                    <Text style={styles.texttop2}>{item.state}</Text>
                </Flex>
                <Flex style={styles.textcen}>
                    <Flex style={{width: 90, height: 90}}>
                        <ImageBackground
                            style={{width: '100%', height: undefined, aspectRatio: 1 / 1}}
                            source={require('~/assets/community/background.png')}>
                            <Flex style={{height: '100%', width: '100%'}} justify={'center'} align={'center'}>
                                <Text style={{color: 'white', fontSize: 16, width: '100%', textAlign: 'center'}}> {item.ParkingName}</Text>
                            </Flex>
                        </ImageBackground>
                    </Flex>
                    <WingBlank>
                        <Flex direction={'column'} align={'start'}>
                            <Flex>
                                <Text style={styles.textcen1}>{item.BuildingName}</Text>
                            </Flex>
                            <Flex justify={'between'}>
                                <Text
                                    style={{
                                        paddingRight: 10,
                                    }}>
                                    {item.AreaName}
                                </Text>
                                <Text
                                    style={{
                                        fontSize: 14,
                                        paddingRight: 10,
                                    }}>
                                    {item.ParkingName}
                                </Text>
                            </Flex>
                            <Flex>
                                <Text
                                    style={{
                                        fontSize: 12,
                                        paddingRight: 10,
                                    }}>
                                    购买人：{item.OwnerName}
                                </Text>
                                <Text
                                    style={{
                                        fontSize: 12,
                                        paddingRight: 10,
                                    }}>
                                    联系电话：{item.Mobile}
                                </Text>
                            </Flex>
                            <Flex>
                                <Text style={styles.fonttext}>
                                    建筑面积：
                                    {item.AreaBuilt}㎡
                                </Text>
                                <Text style={styles.fonttext}>
                                    使用面积：
                                    {item.AreaInner}㎡
                                </Text>
                            </Flex>
                        </Flex>
                    </WingBlank>
                </Flex>
                <Flex style={styles.textbuttom} justify={'between'}>
                    <Text>
                        总计：
                        <Text style={styles.textbuttom2}>￥ {item.ParkingPirce}元</Text>
                    </Text>
                    <Flex>
                        <Text
                            style={styles.textbuttom5}
                            onPress={() => {
                                this.props.navigation.push('MyOrderInfo', {
                                    parkorderid: item.ParkingOrderID,
                                });
                            }}>
                            查看详情
                        </Text>
                    </Flex>
                </Flex>
            </Flex>
        );
    }
    render() {
        return (
            <Flex style={{flex: 1}}>
                <Tabs
                    tabs={this.state.tabs}
                    tabBarActiveTextColor="#E94F4F"
                    tabBarInactiveTextColor="#999999"
                    tabBarUnderlineStyle={{backgroundColor: 'red'}}
                    prerenderingSiblingsNumber={0}
                    initialPage={this.state.index}
                    onChange={this.TabClick}>
                    <FlatList
                        data={this.state.list}
                        style={{width: '100%'}}
                        showsVerticalScrollIndicator={false}
                        renderItem={(data) => this._renderItem(data.item)}
                        keyExtractor={(item, index) => index}
                        // ListHeaderComponent={this._HeaderView}
                        ListFooterComponent={() => this.genIndicator()} //上拉加载更多视图
                        onEndReached={() => {
                            this.loadData();
                        }}
                        onEndReachedThreshold={0.1} // 这个属性的意思是 当滑动到距离列表内容底部不足 0.1*列表内容高度时触发onEndReached函数 为啥要加这个属性 因为不加的话滑动一点点就会立即触发onReached函数，看不到菊花加载中
                        refreshing={true}
                        refreshControl={
                            <RefreshControl
                                refreshing={this.state.refreshing}
                                onRefresh={() => {
                                    this._onRefresh();
                                }}
                            />
                        }
                    />
                </Tabs>
            </Flex>
        );
    }
}

export default connect(mapGetter)(SaleOrder);
export const title = 'Tabs';
export const description = 'Tabs example';

const styles = StyleSheet.create({
    itflex: {
        marginTop: 10,
        backgroundColor: '#FFFFFF',
    },
    flex: {
        height: 43,
        width: '100%',
        borderBottomWidth: 0.2,
        paddingLeft: '5%',
        paddingRight: '5%',
    },
    texttop: {
        fontSize: 14,
        color: '#666666',
    },
    texttop2: {
        color: '#FF3733',
        fontSize: 14,
        fontWeight: 'bold',
    },
    textcen: {
        width: '100%',
        borderBottomWidth: 0.3,
        paddingLeft: 15,
        paddingTop: 10,
        paddingBottom: 10,
    },
    textcen1: {
        fontSize: 16,
        fontWeight: 'bold',
        paddingRight: 10,
    },
    fonttext: {
        fontSize: 12,
        color: '#666666',
        paddingRight: 10,
    },
    textbuttom: {
        width: '100%',
        height: 55,
        borderBottomWidth: 0.2,
        paddingLeft: '5%',
        paddingRight: '5%',
    },
    textbuttom2: {
        color: '#FF3733',
        fontWeight: 'bold',
        fontSize: 15,
    },
    textbuttom3: {
        fontSize: 12,
        width: 70,
        height: 25,
        borderRadius: 12,
        textAlign: 'center',
        borderWidth: 0.2,
        paddingTop: 4,
    },
    textbuttom4: {
        fontSize: 14,
        width: 80,
        height: 30,
        borderWidth: 1,
        borderColor: '#666666',
        borderRadius: 15,
        color: '#666666',
        textAlign: 'center',
        paddingTop: 5,
        marginLeft: 5,
    },
    textbuttom5: {
        fontSize: 14,
        width: 80,
        height: 30,
        borderWidth: 1,
        borderColor: '#E67817',
        borderRadius: 15,
        color: '#E67817',
        textAlign: 'center',
        paddingTop: 5,
        marginLeft: 5,
    },
});
